<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="/WEB-INF/webviews/common/common.jsp"%>
<%@ include file="/WEB-INF/webviews/common/header.jsp"%>
<link href="${_currConText }/static/css/sample/style.css?v=4.1.0" rel="stylesheet">
<%@ include file="/WEB-INF/webviews/common/context/layui.jsp"%>
<%@ include file="/WEB-INF/webviews/common/context/bootstrap.jsp"%>
<title>文章列表</title>
<style type="text/css">
.news_search{ padding:10px 10px; }
.news_search .layui-inline{ margin:5px 5px 5px 0; }
.layui-table,.layui-table th{ text-align:center; }
.news_list .layui-btn,.news_list .layui-btn+.layui-btn{ margin:2px 5px; }
.news_list .layui-form-switch{ margin-top:0; }
.layui-word-aux {font-size: 12px;}
.search_input {
font:14px Helvetica Neue,Helvetica,PingFang SC,微软雅黑,Tahoma,Arial,sans-serif;
}
/*分页*/
#page{ text-align:right; }
</style>
</head>

<body class="childrenBody">
	<blockquote class="layui-elem-quote news_search">
		<div class="layui-inline">
			<div class="layui-input-inline">
				<input type="text" value="" placeholder="请输入关键字"
					class="layui-input search_input">
			</div>
			<a class="layui-btn search_btn">查询</a>
		</div>
		<div class="layui-inline">
			<a class="layui-btn layui-btn-normal newsAdd_btn">添加文章</a>
		</div>
		<div class="layui-inline">
			<a class="layui-btn recommend" style="background-color: #5FB878">推荐文章</a>
		</div>
		<div class="layui-inline">
			<a class="layui-btn audit_btn">审核文章</a>
		</div>
		<div class="layui-inline">
			<a class="layui-btn layui-btn-danger batchDel">批量删除</a>
		</div>
		<div class="layui-inline">
			<div class="layui-form-mid layui-word-aux">本页面刷新后除新添加的文章外所有操作无效，关闭页面所有数据重置</div>
		</div>
	</blockquote>
	<div class="layui-form news_list">
		<table class="layui-table">
			<colgroup>
				<col width="50">
				<col>
				<col width="9%">
				<col width="9%">
				<col width="9%">
				<col width="9%">
				<col width="9%">
				<col width="15%">
			</colgroup>
			<thead>
				<tr>
					<th><input type="checkbox" name="" lay-skin="primary"
						lay-filter="allChoose" id="allChoose"></th>
					<th style="text-align: left;">文章标题</th>
					<th>发布人</th>
					<th>审核状态</th>
					<th>浏览权限</th>
					<th>是否展示</th>
					<th>发布时间</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody class="news_content"></tbody>
		</table>
	</div>
	<div id="page"></div>
</body>
<%@ include file="/WEB-INF/webviews/common/footer.jsp"%>

<script type="text/javascript">
	layui.use(['form','layer','jquery','laypage'],function(){
		var form = layui.form,
		layer = parent.layer === undefined ? layui.layer : parent.layer,
		laypage = layui.laypage,
		$ = layui.jquery;
	
	
		//加载页面数据
		var newsData = '';
		
		
		//查询
		$(".search_btn").click(function(){
			var newArray = [];
			if($(".search_input").val() != ''){
				var index = layer.msg('查询中，请稍候',{icon: 16,time:false,shade:0.8});
				setTimeout(function(){
					layer.close(index);
				},2000);
			}else{
				layer.msg("请输入需要查询的内容");
			}
		});
		
		//添加文章
		$(".newsAdd_btn").click(function(){
			var index = layui.layer.open({
				title : "添加文章",
				type : 2,
				content : "articleAdd.shtml",
				success : function(layero, index){
					layui.layer.tips('点击此处返回文章列表', '.layui-layer-setwin .layui-layer-close', {
						tips: 3
					});
				}
			})
			//改变窗口大小时，重置弹窗的高度，防止超出可视区域（如F12调出debug的操作）
			$(window).resize(function(){
				layui.layer.full(index);
			})
			layui.layer.full(index);
		});
		
		//推荐文章
		$(".recommend").click(function(){
			var $checkbox = $(".news_list").find('tbody input[type="checkbox"]:not([name="show"])');
			if($checkbox.is(":checked")){
				var index = layer.msg('推荐中，请稍候',{icon: 16,time:false,shade:0.8});
				setTimeout(function(){
					layer.close(index);
					layer.msg("推荐成功");
				},2000);
			}else{
				layer.msg("请选择需要推荐的文章");
			}
		});
		
		//审核文章
		$(".audit_btn").click(function(){
			var $checkbox = $('.news_list tbody input[type="checkbox"][name="checked"]');
			var $checked = $('.news_list tbody input[type="checkbox"][name="checked"]:checked');
			if($checkbox.is(":checked")){
				var index = layer.msg('审核中，请稍候',{icon: 16,time:false,shade:0.8});
				setTimeout(function(){
					for(var j=0;j<$checked.length;j++){
						for(var i=0;i<newsData.length;i++){
							if(newsData[i].newsId == $checked.eq(j).parents("tr").find(".news_del").attr("data-id")){
								//修改列表中的文字
								$checked.eq(j).parents("tr").find("td:eq(3)").text("审核通过").removeAttr("style");
								//将选中状态删除
								$checked.eq(j).parents("tr").find('input[type="checkbox"][name="checked"]').prop("checked",false);
								form.render();
							}
						}
					}
					layer.close(index);
					layer.msg("审核成功");
				},2000);
			}else{
				layer.msg("请选择需要审核的文章");
			}
		});
		
		//批量删除
		$(".batchDel").click(function(){
			var $checkbox = $('.news_list tbody input[type="checkbox"][name="checked"]');
			var $checked = $('.news_list tbody input[type="checkbox"][name="checked"]:checked');
			if($checkbox.is(":checked")){
				layer.confirm('确定删除选中的信息？',{icon:3, title:'提示信息'},function(index){
					var index = layer.msg('删除中，请稍候',{icon: 16,time:false,shade:0.8});
					setTimeout(function(){
						//删除数据
						for(var j=0;j<$checked.length;j++){
							for(var i=0;i<newsData.length;i++){
								if(newsData[i].newsId == $checked.eq(j).parents("tr").find(".news_del").attr("data-id")){
									newsData.splice(i,1);
									newsList(newsData);
								}
							}
						}
						$('.news_list thead input[type="checkbox"]').prop("checked",false);
						form.render();
						layer.close(index);
						layer.msg("删除成功");
					},2000);
				});
			}else{
				layer.msg("请选择需要删除的文章");
			}
		});
		
		//全选
		form.on('checkbox(allChoose)', function(data){
			var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]:not([name="show"])');
			child.each(function(index, item){
				item.checked = data.elem.checked;
			});
			form.render('checkbox');
		});
		
		//通过判断文章是否全部选中来确定全选按钮是否选中
		form.on("checkbox(choose)",function(data){
			var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]:not([name="show"])');
			var childChecked = $(data.elem).parents('table').find('tbody input[type="checkbox"]:not([name="show"]):checked')
			if(childChecked.length == child.length){
				$(data.elem).parents('table').find('thead input#allChoose').get(0).checked = true;
			}else{
				$(data.elem).parents('table').find('thead input#allChoose').get(0).checked = false;
			}
			form.render('checkbox');
		});
	
		//是否展示
		form.on('switch(isShow)', function(data){
			var index = layer.msg('修改中，请稍候',{icon: 16,time:false,shade:0.8});
				setTimeout(function(){
				layer.close(index);
				layer.msg("展示状态修改成功！");
			},2000);
		});
		
		//操作
		$("body").on("click",".news_edit",function(){  //编辑
			layer.alert('您点击了文章编辑按钮，由于是纯静态页面，所以暂时不存在编辑内容，后期会添加，敬请谅解。。。',{icon:6, title:'文章编辑'});
		});
	
		$("body").on("click",".news_collect",function(){  //收藏.
			if($(this).text().indexOf("已收藏") > 0){
				layer.msg("取消收藏成功！");
				$(this).html("<i class='layui-icon'>&#xe600;</i> 收藏");
			}else{
				layer.msg("收藏成功！");
				$(this).html("<i class='iconfont icon-star'></i> 已收藏");
			}
		});
		
		$("body").on("click",".news_del",function(){  //删除
			var _this = $(this);
			layer.confirm('确定删除此信息？',{icon:3, title:'提示信息'},function(index){
				//_this.parents("tr").remove();
				for(var i=0;i<newsData.length;i++){
					if(newsData[i].newsId == _this.attr("data-id")){
						newsData.splice(i,1);
						newsList(newsData);
					}
				}
				layer.close(index);
			});
		});
	
		function newsList(that){
			//渲染数据
			function renderDate(data,curr){
				var dataHtml = '';
				if(!that){
					currData = newsData.concat().splice(curr*nums-nums, nums);
				}else{
					currData = that.concat().splice(curr*nums-nums, nums);
				}
				if(currData.length != 0){
					for(var i=0;i<currData.length;i++){
						dataHtml += '<tr>'
				    	+'<td><input type="checkbox" name="checked" lay-skin="primary" lay-filter="choose"></td>'
				    	+'<td align="left">'+currData[i].newsName+'</td>'
				    	+'<td>'+currData[i].newsAuthor+'</td>';
				    	if(currData[i].newsStatus == "待审核"){
				    		dataHtml += '<td style="color:#f00">'+currData[i].newsStatus+'</td>';
				    	}else{
				    		dataHtml += '<td>'+currData[i].newsStatus+'</td>';
				    	}
				    	dataHtml += '<td>'+currData[i].newsLook+'</td>'
				    	+'<td><input type="checkbox" name="show" lay-skin="switch" lay-text="是|否" lay-filter="isShow"'+currData[i].isShow+'></td>'
				    	+'<td>'+currData[i].newsTime+'</td>'
				    	+'<td>'
						+  '<a class="layui-btn layui-btn-mini news_edit"><i class="iconfont icon-edit"></i> 编辑</a>'
						+  '<a class="layui-btn layui-btn-normal layui-btn-mini news_collect"><i class="layui-icon">&#xe600;</i> 收藏</a>'
						+  '<a class="layui-btn layui-btn-danger layui-btn-mini news_del" data-id="'+data[i].newsId+'"><i class="layui-icon">&#xe640;</i> 删除</a>'
				        +'</td>'
				    	+'</tr>';
					}
				}else{
					dataHtml = '<tr><td colspan="8">暂无数据</td></tr>';
				}
			    return dataHtml;
			}
	
			//分页
			var nums = 13; //每页出现的数据量
			if(that){
				newsData = that;
			}
			laypage({
				cont : "page",
				pages : Math.ceil(newsData.length/nums),
				jump : function(obj){
					$(".news_content").html(renderDate(newsData,obj.curr));
					$('.news_list thead input[type="checkbox"]').prop("checked",false);
			    	form.render();
				}
			});
		}
	});
</script>
</html>